@import "base/common";
@import "base/friends-link";

// ==============================================
// index-news
// ==============================================
.index-news{
	position: relative;

	.container{
		height: 710px;
		border-top: 1px solid $colorFFF;
	}

	ul{
		margin-top: 85px;
		padding: 0 10px;

		li{
			position: relative;
			float: left;
			width: 350px;
			height: 430px;
			margin: 0 5px;

			opacity: 0;
			@include translate(0, 15%, 0);

			.link{
				display: block;
				width: 320px;
				height: 400px;
				padding: 15px;
				@include transition(all, .5s, ease, 0);

				&:hover{
					background-color: $colorFFF;
					@include boxShadow(0, 0, 30px, rgba(0,0,0,.2));
					@include transition(all, .5s, ease, 0);
				}

				.imgbox{
					width: 320px;
					height: 180px;
					overflow: hidden;
					background-color: #f7f7f7;

					img{
						width: 100%;
						height: 100%;
					}
				}
				.news-box{
					height: 149px;
					margin-top: 21px;
					overflow: hidden;
					line-height: 24px;

					.title{
						font-size: 16px;
						color: $color333;
					}
					.desc{
						margin-top: 10px;
						font-size: 14px;
						color: $color999;
					}
				}
				.info{
					margin-top: 18px;
					color: $color999;
					font-size: 14px;
					line-height: 24px;

					.date{
						float: left;
					}
					.resource{
						float: left;
						margin-left: 17px;
					}
				}
			}
		}

		&.active{
			li{
				opacity: 1;
				@include translate(0, 0, 0);

				&:nth-of-type(1){
					@include transitionTransform(opacity, .5s, ease, .1s);
				}
				&:nth-of-type(2){
					@include transitionTransform(opacity, .5s, ease, .3s);
				}
				&:nth-of-type(3){
					@include transitionTransform(opacity, .5s, ease, .5s);
				}
			}
		}
	}

	.btn-more{
		display: block;
		width: 138px;
		height: 42px;
		margin: 62px auto 0;
		border: 1px solid $colorE0;
		border-radius: 21px;
		font-size: 16px;
		line-height: 42px;
		color: $color999;
		text-align: center;	
		@include transition(all, .3s, ease, 0);

		&:hover{
			border: 1px solid $colorYellow;
			background-color: $colorYellow;
			color: $colorFFF;
			@include transition(all, .3s, ease, 0);
		}
	}
}




// ==============================================
// .about-intro
// ==============================================
.about-intro{
	position: relative;
	background-color: #f7f7f7;

	.container{
		width: 900px;
		padding: 20px 100px 250px 100px;
		border-top: 1px solid #f7f7f7;
	}

	.title{
		margin-top: 160px;
		font-size: 40px;
		font-weight: bolder;
		line-height: 60px;
		color: $color333;
		text-align: center;

		opacity: 0;
		@include translate(0, 60px, 0);

		span{
			padding-left: 14px;
			font-size: 28px;
			font-weight: normal;
		}

		&.active{
			opacity: 1;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .5s, ease, .2s);
		}
	}

	.desc{
		margin-top: 37px;
		font-size: 18px;
		line-height: 40px;
		color: $color666;
		text-indent: 2em;

		opacity: 0;
		@include translate(0, 60px, 0);

		&.active{
			opacity: 1;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .5s, ease, .4s);
		}

		.time-line{
			padding-top: 48px;
			text-indent: 0;

			.date{
				float: left;
				width: 140px;
				margin-left: 50px;

				ul{
					li{
						margin-top: 67px;
						font-size: 30px;
						color: $color333;
						line-height: 40px;

						&:first-child{
							margin-top: 0;
						}
					}
				}
			}
			.line{
				float: left;
				width: 16px;

				ul{
					position: relative;
					overflow: hidden;

					&:before{
						content: "";
						@include position(absolute, 2, 20px, none, 8px, 7px);
						width: 2px;
						background-color: #e0e0e0;

					}

					li{
						position: relative;
						z-index: 3;
						margin-top: 91px;
						width: 10px;
						height: 10px;
						border: 3px solid $color333;
						border-radius: 50%;
						background-color: #f7f7f7;

						&:first-child{
							margin-top: 12px;
						}
					}
				}
			}
			.event{
				float: left;
				width: 660px;
				margin-left: 30px;
				ul{
					li{
						position: relative;
						margin-top: 67px;
						font-size: 18px;
						color: $color666;
						line-height: 40px;

						&:first-child{
							margin-top: 0;
						}
					}
				}
			}
		}
	}
}


@media screen and (max-width: 1601px){

// ==============================================
// index-news
// ==============================================
.index-news{
	.container{
		height: 605px;
	}

	ul{
		margin-top: 50px;
	}

	.btn-more{
		margin: 47px auto 0;
	}
}




// ==============================================
// .about-intro
// ==============================================
.about-intro{

	.container{
		padding: 0 100px 50px 100px;
	}

	.title{
		margin-top: 75px;
	}

	.desc{
		margin-top: 22px;

		.time-line{
			padding-top: 15px;
		}
	}
}


}
